<script>
import { normal_option } from "../common";
import Base from "./Base";

export default {
  name: "ChartLineBar",
  mixins: [Base],
  data() {
    return {
      defaultOption: {
        ...normal_option,
        grid: {
          left: 80,
          right: 60,
          bottom: 50,
        },
        legend: {
          show: true,
        },
        xAxis: {
          show: true,
          type: "category",
          axisLine: {
            show: true,
          }, // 坐标轴线
          axisTick: {
            show: false,
          }, // 坐标轴刻度
          axisLabel: {
            show: true,
            rotate: 0,
            margin: 18,
            align: "center",
            verticalAlign: "middle",
          }, // 坐标轴标签
          splitLine: {
            show: false,
          },
        },
        yAxis: [
          {
            type: "value",
            splitNumber: 5,
          },
          {
            type: "value",
            axisLabel: {
              formatter: "{value} %",
            },
            splitLine: {
              show: false, //是否显示分隔线。
            },
          },
        ],
        series: [],
      },
      defaultSeries: {
        type: "bar",
        barWidth: 20, // 柱子宽度
        /* barGap: 0// 不同系列柱子间距*/
      },
      defaultSeriesForLine: {
        type: "line",
        yAxisIndex: 1,
        /* barGap: 0// 不同系列柱子间距*/
      },
    };
  },
  computed: {
    option: function () {
      let series = [],
        length = this.dataset.dimensions.length;
      let option = this.dataset.option;

      for (let i = 1; i < length; i++) {
        if (i === length - 1) {
          series.push({
            ...this.defaultSeriesForLine,
            color:
              option && option.color && option.color[i - 1]
                ? option.color[i - 1]
                : [],
            name:
              option &&
              option.legend &&
              option.legend.data &&
              option.legend.data[i - 1]
                ? option.legend.data[i - 1]
                : [],
          });
        } else {
          series.push({
            ...this.defaultSeries,
            color:
              option && option.color && option.color[i - 1]
                ? option.color[i - 1]
                : [],
            name:
              option &&
              option.legend &&
              option.legend.data &&
              option.legend.data[i - 1]
                ? option.legend.data[i - 1]
                : [],
          });
        }
      }
      return {
        ...this.defaultOption,
        ...this.dataset.option,
        dataset: this.dataset,
        series,
        // color,
      };
    },
  },
};
</script>
